<!--suppress ALL -->
<template>
    <div class="info-container">
        <div class="brief-info-container">
            <section class="panel">
                <header>
                    <div class="title">EVENT 信息</div>
                    <div class="refresh-btn">
                        <a-icon type="sync" spin></a-icon>
                        <span>刷新</span>
                    </div>
                </header>

                <div class="panel-body">
                    <a-table
                        :row-key="'id'"
                        :columns="columns"
                        :data-source="info.events"
                        :pagination="false">
                    </a-table>
                </div>
            </section>

            <section class="panel">
                <header>
                    <div class="title">DEPENDENCE 信息</div>
                </header>

                <div class="panel-body">
                    <ul>
                        <template v-for="dep in info.dependencies">
                            <li :key="dep.key">
                                <span>{{ dep.group }}</span>
                                <span>{{ dep.artifact }}</span>
                                <span>{{ dep.version }}</span>
                            </li>
                        </template>
                    </ul>
                </div>
            </section>
        </div>

        <div class="detail-info-container">
            <section class="panel">
                <header>
                    <div class="title">BUILD 信息</div>
                    <div class="refresh-btn">
                        <a-icon type="sync" spin></a-icon>
                        <span>刷新</span>
                    </div>
                </header>

                <div class="panel-body">
                    <ul>
                        <template v-for="bd in info.build">
                            <li :key="bd.key">
                                <span>{{ bd.name }}</span>
                                <span>{{ bd.value }}</span>
                            </li>
                        </template>
                    </ul>
                </div>
            </section>

            <section class="panel">
                <header>
                    <div class="title">GIT 信息</div>
                    <div class="refresh-btn">
                        <a-icon type="sync" spin></a-icon>
                        <span>刷新</span>
                    </div>
                </header>

                <div class="panel-body">
                    <ul>
                        <template v-for="gt in info.git">
                            <li :key="gt.key">
                                <span>{{ gt.name }}</span>
                                <span>{{ gt.value }}</span>
                            </li>
                        </template>
                    </ul>
                </div>
            </section>

            <section class="panel">
                <header>
                    <div class="title">HEALTH 信息</div>
                    <div class="refresh-btn">
                        <a-icon type="sync" spin></a-icon>
                        <span>刷新</span>
                    </div>
                </header>

                <div class="panel-body">
                    <section>
                        <span>DB</span>
                        <ul>
                            <template v-for="it in info.db">
                                <li :key="it.key">
                                    <span>{{ it.name }}</span>
                                    <span>{{ it.value }}</span>
                                </li>
                            </template>
                        </ul>
                    </section>

                    <section>
                        <span>DISK</span>
                        <ul>
                            <template v-for="it in info.disk">
                                <li :key="it.key">
                                    <span>{{ it.name }}</span>
                                    <span>{{ it.value }}</span>
                                </li>
                            </template>
                        </ul>
                    </section>
                </div>
            </section>
        </div>
    </div>
</template>

<script>
    // 1. 定义表头.
    const columns = [
        { title: '时间', dataIndex: 'createTime', width: '30%' },
        { title: '事件', dataIndex: 'eventDescription', width: '70%' },
    ];

    export default {
        name: 'Detail',
        computed: {
            info() {
                return this.$store.state.info;
            },
        },
        data() {
            return {
                columns,
            };
        },
        mounted() {
            this.$store.dispatch('info/loadInfo', this.$route.params.id);
        },
    };
</script>

<style lang="scss" scoped>
    .info-container {
        display: flex;
        flex-direction: row;

        section.panel {
            margin-bottom: 24px;
            padding: 0 24px 24px;
            background: #FFF;
            border-radius: 8px;
            box-shadow: 0 0 10px 0 rgba(226, 232, 237, .5);

            & > header {
                margin-bottom: 24px;
                padding: 16px 0;
                font-size: 16px;
                font-weight: 500;
                color: rgba(0, 0, 0, .85);
                border-bottom: 1px solid #D9E1E8;
                overflow: hidden;

                & > .title {
                    float: left;
                }

                & > .refresh-btn {
                    float: right;
                    font-size: 14px;
                    font-weight: 400;
                    color: #2A6CF0;
                    cursor: pointer;

                    span {
                        margin-left: 7px;
                    }
                }
            }

            ul {
                border: 1px solid #D9E1E8;
                border-top: none;

                li {
                    border-top: 1px solid #D9E1E8;

                    span:first-of-type {
                        border-right: 1px solid #D9E1E8;
                    }
                }
            }
        }

        & > .brief-info-container {
            margin-right: 2%;
            width: 63%;

            div.panel-body li {
                &:nth-of-type(odd) {
                    background: #F9FAFB;
                }

                span {
                    display: inline-block;
                    padding: 9px 0 9px 24px;
                    color: #282C3B;

                    &:first-of-type {
                        width: 40%;
                        font-size: 16px;
                        font-weight: 500;
                    }

                    &:nth-of-type(2) {
                        width: 40%;
                        border-right: 1px solid #D9E1E8;
                    }

                    &:last-of-type {
                        font-size: 14px;
                        font-weight: 400;
                    }
                }
            }
        }

        & > .detail-info-container {
            width: 35%;

            div.panel-body li {
                span {
                    display: inline-block;
                    padding: 9px 0 9px 20px;
                    color: #282C3B;

                    &:first-of-type {
                        width: 30%;
                        font-size: 16px;
                        font-weight: 500;
                        background: #F3F6F8;
                    }

                    &:last-of-type {
                        font-size: 14px;
                        font-weight: 400;
                    }
                }
            }

            section > span {
                display: block;
                margin: 24px 0 16px;
                font-size: 16px;
                font-weight: 500;
                color: rgba(0, 0, 0, .85);
            }
        }
    }
</style>
